<template>
  <div
    class="flex flex-wrap justify-start content-around"
    :style="{ width: props.width, height: props.height }"
  >
    <div
      v-for="(it, index) in datas"
      :key="index"
      :style="{ width: '30%', height: '100px' }"
      class="flex flex-col items-center justify-between"
    >
      <SvgIcon :iconClass="it.icon" size="55px"></SvgIcon>
      <div
        class="flex-1 flex flex-col justify-between items-center text-center"
      >
        <span class="text-[12px] text-[gray] text-center">{{ it.title }}</span>
        <span class="text-[white] text-[19px] font-bold text-center">{{
          it.num
        }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed, watch } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "400px",
  },
  height: {
    type: String,
    default: "30px",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
  responseData: {
    type: Object,
    default: () => ({}),
  },
});
const datas = reactive([
  {
    icon: "yingshou_cishu",
    title: "应收次数",
    num: "1000",
  },
  {
    icon: "shishou_cishu",
    title: "实收次数",
    num: "1000",
  },
  {
    icon: "shibie_lv",
    title: "识别率",
    num: "1000",
  },
  {
    icon: "yingshou_zijie",
    title: "应收字节",
    num: "1000",
  },
  {
    icon: "shishou_zijie",
    title: "实收字节",
    num: "1000",
  },
  {
    icon: "shibie_lan",
    title: "识别率",
    num: "1000",
  },
]);
watch(
  () => props.responseData,
  () => {
    if (props.responseData) {
      datas[0].num = props.responseData.shouldNum;
      datas[1].num = props.responseData.realNum;
      datas[2].num = props.responseData.percentage;
      datas[3].num = props.responseData.shouldByte;
      datas[4].num = props.responseData.realByte;
      datas[5].num = props.responseData.percentageByte;
    }
  },
  {
    deep: true,
  }
);
// const states = computed({
//   get: () => props.models,
// });
</script>

<style scoped lang="scss">
.text-underline {
  position: relative;
  overflow: hidden; /* 确保伪元素不会超出容器 */
  display: block;
  z-index: 111;
}

.text-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  display: block;
  height: 7px;
  background: rgb(4, 117, 150);
  background: linear-gradient(
    90deg,
    rgba(4, 117, 150, 1) 0%,
    rgba(111, 210, 238, 0.6110819327731092) 25%,
    rgba(254, 244, 255, 0.2976365546218487) 100%
  );
  transform: scaleX(1);
  transition: transform 0.3s;
  transform: skewX(106deg);
  z-index: -1;
}
</style>
